<template>
	<view class="message-info-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar :textContent="barTitle" isBackShow></free-nav-bar>
		<!-- #endif -->
		<view class="message-wrapper">
			<template v-if="listData && listData.length > 0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<uni-list :border="true">
						<uni-list-item 
							v-for="(item, index) in listData" :key="item.id"
							:title="item.msgBody.title" 
							:note="item.msgType == 0 ? '您收到一条服务通知' : '你收到一条物流信息'"  
							:show-badge="!item.readStatus" 
							:rightText="parseTime(item.createTime)"
							badge-text="1" link @click="showMessage(item)">
							
						</uni-list-item>					
					</uni-list>
				</scroll-view>
			</template>
			<template v-else>
				<view style="width: 100%; height: 200rpx;line-height: 100rpx;text-align: center;color: #828280;">暂无消息</view>
			</template>
		</view>
		<uni-popup ref="msgPopup" borderRadius="20rpx 20rpx 0rpx 0rpx" background-color="#fff" :showClose="true" type="bottom">
			<view class="popup-content">
				<view class="popup-top">
					<uni-row>
						<uni-col :span="12">
							<text style="font-size: 30rpx;font-weight: bold;">{{message.msgBody.title}}</text>
						</uni-col>
						<uni-col :span="10">
							<text style="font-size: 24rpx;text-align: right;">{{parseTime(message.createTime)}}</text>
						</uni-col>
						<uni-col :span="2">
							<uni-icons type="closeempty" @click="closeMsgPopup"></uni-icons>
						</uni-col>
					</uni-row>
				</view>
				<view class="popup-body">
					<text>{{message.msgBody.body}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	import $D from '@/common/free-lib/time.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			freeNavBar,
			uniIcons
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				barTitle: '物流信息',
				listData: [],
				queryForm: {
					msgType: undefined,
					pageNo: 1,
					pageSize: 10
				},
				message: {					
					msgBody: {
						title: '',
						body: ''
					},
					createTime: undefined
				}
			}
		},
		onLoad(e) {
			if(e && e.msgType) {
				this.barTitle = e.msgType == 0 ? '服务通知': '物流信息';
				this.getList(e.msgType);
				uni.setNavigationBarTitle({
					title: this.barTitle
				});
			}		
		},
		created() {
			
		},
		methods: {
			parseTime(value) {
				return $D.parseTime(value);
			},
			getList(msgType) {
				let _this = this;
				this.queryForm.msgType = msgType;
				$H.get('/member/msg/getList', this.queryForm).then(res => {
					console.log(res.list)
					if(res && res.list) {
						if(_this.listData.length == 0) {
							_this.listData= res.list;
						}
						else {
							_this.listData.concat(res.list);
						}
					}
				})
			},
			showMessage(item) {
				this.message = item;
				this.$refs.msgPopup.open();
				this.readHandle(item);
			},
			closeMsgPopup() {
				this.message = {					
					msgBody: {
						title: '',
						body: ''
					},
					createTime: undefined
				};
				this.$refs.msgPopup.close();
			},
			readHandle(item) {
				let _this = this;
				let id = item.id;
				$H.post('/member/msg/read', {id}).then(res => {
					_this.getList(_this.queryForm.msgType);
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			handleFruits() {
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-info-page {
		.message-wrapper {
			padding-top: 16rpx;
		}
		.message-item {
			padding: 20rpx;
			padding-bottom: 30rpx;
			background: #fff;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			.name {
				font-weight: bold;
			}
			.subtitle {
				line-height: 33rpx;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
			.msg-dot {
				line-height: 33rpx;
			}
			.timer {
				line-height: 33rpx;
				font-size: 24rpx;
				color: #999;
			}			
		}
		.popup-content {
			position: relative;
			width: 100%;
			min-height: 650rpx;
			padding: 20rpx;
			.popup-top {
				width: 100%;
				height: 120rpx;
				line-height: 60rpx;
			}
			.popup-body {
				width: 100%;
				min-height: 200rpx;
				height: auto;
			}
		}
	}
	/deep/ .uni-list-chat__header-warp {
		display: none;
	}
	/deep/ .uni-badge--dot {
		position: relative;
		float: left;
		left: 0px;
	} 
	/deep/ .uni-badge {
		min-width: 20rpx;
		height: 20rpx;
		background-color: #ff5a5f;
		&:first-child span {
			display: none;
		}
	}
</style>
